<template>
  <div>
    <!--  面包屑导航区域 :to="{path:'/admin/welcome' 路由跳转 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>游玩列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域  -->
    <el-card class="box-card">
      <!--   搜索与添加及刷新区域 :gutter间距  -->
      <el-row :gutter="20">
        <!--    搜索    -->
        <el-col :span="8">
          <el-input placeholder="请输入游玩名称" v-model="queryName" id="queryName">
            <el-button slot="append" @click="selectByName" icon="el-icon-search">搜索</el-button>
          </el-input>
        </el-col>
        <!--   新增按钮    type="primary"蓝色主要 -->
        <el-col :span="6">
          <el-button type="primary" @click="add()"  icon="el-icon-folder-add">新增游玩</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </el-col>
      </el-row>
      <div>
        &nbsp;
      </div>
      <!--   游玩列表区域   -->
      <!--   游玩卡片   -->
      <el-row>
        <el-col :span="5" v-for="(item) in travels" :key="item.id" :offset="1"><div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img v-show="item.image"  v-bind:src="item.image" class="image">
            <div style="padding: 14px;">
              <div>
                <el-link type="primary" @click="toActivity(item)">{{item.name}}</el-link>
              </div>
              <div>
                <el-link icon="el-icon-shopping-cart-full">{{item.price}}</el-link>
              </div>
              <div class="bottom clearfix">
                <el-tag size="small" type="warning" v-if="item.charge == 'C'" @click="showEdittravel(item.id)">收费</el-tag>
                <el-tag size="small" type="success" v-if="item.charge == 'F'" @click="showEdittravel(item.id)">免费</el-tag>&nbsp;
                <el-tag size="small" type="info" v-if="item.level == '1'" @click="showEdittravel(item.id)">普通</el-tag>
                <el-tag size="small" type="warning" v-if="item.level == '2'" @click="showEdittravel(item.id)">推荐</el-tag>
                <el-tag size="small" type="danger" v-if="item.level == '3'" @click="showEdittravel(item.id)">精选</el-tag>&nbsp;
                <el-tag size="small" type="info" v-if="item.step == 'D'" @click="showEdittravel(item.id)">草稿</el-tag>
                <el-tag size="small" type="success" v-if="item.step == 'P'" @click="showEdittravel(item.id)">发布</el-tag>
              </div>
              <div class="bottom clearfix">
                <el-switch v-model = "item.status"
                           :active-value="0"
                           :inactive-value="1"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           @change="changedStatus(item)">
                </el-switch>&nbsp;
                <el-button type="primary" icon="el-icon-sort"  circle @click="openSortModal(item)"  size="mini"></el-button>
                <el-button type="primary" icon="el-icon-s-claim"  circle @click="editContent(item)"  size="mini"></el-button>
                <el-button type="primary" icon="el-icon-edit"  circle @click="showEdittravel(item.id)"  size="mini"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(item.id)"  size="mini"></el-button>&nbsp;
              </div>
            </div>
          </el-card>
        </div></el-col>
      </el-row>
      <!--  分页插槽    -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 4, 8, 12]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加模态框  -->
    <el-dialog
        title="添加游玩信息"
        :visible.sync="saveDialogVisible"
        width="50%"
        @close = "saveDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="travel" :rules="saveFormRules" ref="saveFormRef" label-width="110px">
          <el-form-item label="分类" prop="">
            <el-tree
                :data="level1"
                show-checkbox
                :props="defaultProps"
                ref="treeRef"
                accordion
                @check="checkTree">
            </el-tree>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="travel.name"@input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="概述" prop="summary">
            <el-input v-model="travel.summary" @input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="时长" prop="time">
            <el-input v-model="travel.time" @input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="价格(元)" prop="price">
            <el-input v-model="travel.price" @input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="封面" prop="image">
            <big-file
                v-model="travel.image"
                v-bind:input-id="'image-upload'"
                v-bind:suffixs="['jpg','jpeg','png']"
                v-bind:text="'上传封面'"
                v-bind:after-upload="afterUpload"></big-file>
            <el-form-item label="预览">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
              >
              </el-image>
            </el-form-item>
          </el-form-item>
          <el-form-item label="级别" prop="levelEnum">
            <el-select v-model="travel.level" placeholder="请选择"  style="width:100%">
              <el-option
                  v-for="item in LEVEL"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费" prop="chargeEnum">
            <el-select v-model="travel.charge" placeholder="请选择"  style="width:100%">
              <el-option
                  v-for="item in CHARGE"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="步骤" prop="stepEnum">
            <el-select v-model="travel.step" placeholder="请选择"  style="width:100%">
              <el-option
                  v-for="item in STEP"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="认证机构">
          <el-select v-model="travel.organId" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in this.$data.organs"
                :key="item.id"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="报名数" prop="enroll">
            <el-input v-model="travel.enroll" @input="updateInput($event)"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input v-model="travel.sort" @input="updateInput($event)"></el-input>
          </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savetravel">保 存</el-button>
        <el-button @click="saveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  修改模态框  -->
    <el-dialog
        title="修改游玩信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close = "editDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="分类" prop="">
          <el-tree
              :data="level1"
              show-checkbox
              :props="defaultProps"
              ref="treeRef"
              accordion
              @check="checkTree">
          </el-tree>
        </el-form-item>
        <el-form-item label="ID:" >
          <el-tag>{{editForm.id}}</el-tag>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="概述" prop="summary">
          <el-input v-model="editForm.summary" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="time">
          <el-input v-model="editForm.time" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price">
          <el-input v-model="editForm.price" @input="updateInput($event)"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="image">
          <big-file
              v-model="editForm.image"
              v-bind:input-id="'editImage-upload'"
              v-bind:suffixs="['jpg','jpeg','png']"
              v-bind:text="'上传封面'"
              v-bind:after-upload="afterUpload"></big-file>
          <el-form-item label="预览">
            <el-image
                style="width: 100px; height: 100px"
                :src="url"
            >
            </el-image>
          </el-form-item>
        </el-form-item>
        <el-form-item label="级别" prop="levelEnum">
          <el-select v-model="editForm.level" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in LEVEL"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费" prop="chargeEnum">
          <el-select v-model="editForm.charge" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in CHARGE"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="步骤" prop="stepEnum">
          <el-select v-model="editForm.step" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in STEP"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="认证机构">
          <el-select v-model="editForm.organId" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in this.$data.organs"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报名数" prop="enroll">
          <el-input v-model="editForm.enroll" @input="updateInput($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="edittravel">保 存</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  内容模态框  -->
    <el-dialog
        title="编辑内容信息"
        :visible.sync="contentDialogVisible"
        width="50%"
        @close = "contentDialogClosed">
      <!--   内容主体区域   -->
      <div id="content"></div>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveContent">保 存</el-button>
        <el-button @click="contentDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  排序模态框  -->
    <el-dialog
        title="排序信息"
        :visible.sync="sortDialogVisible"
        width="50%"
        @close = "sortDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="sort"  ref="contentFormRef" label-width="110px">
        <el-form-item label="当前排序:" >
          <el-tag>{{sort.oldSort}}</el-tag>
        </el-form-item>
        <el-form-item label="最新排序:" >
          <el-input v-model="sort.newSort" @input="updateInput($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateSort">更新</el-button>
        <el-button @click="sortDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
/*
* 方法 methods:
*   list()-游玩列表查询/刷新
*   handleSizeChange 监听页面条数变化
*   handleCurrentChange 监听页码值变化
*   addDialogClosed 监听添加模态框的关闭事件
*   editDialogClosed 监听修改模态框的关闭事件
*   addtravel 游玩添加
*   showEdittravel 修改游玩前根据id获取游玩对象决定是否展示模态框
*   changedStatus 状态封号
*   del 删除游玩
*   openFullScreen() 等待Loading加载
*   refresh() 刷新
*
* 生命周期 mounted:
*   _this.list()-页面初始化时候执行list
*
* 数据 data:function ():
*   travels:[]-一个travel空数组
*   addDialogVisible-控制模态框显示隐藏的布尔值
*   total 总条数
*   queryInfo 请求参数块
*
* */
import BigFile from "../../views/big-file"

export default {
    name: "Travel",
    components:{BigFile},
    data:function (){
      return{
        sort:{
          id:"",
          oldSort:"0",
          newSort:"0"
        },
        editorOption: {
          placeholder: "请在这里输入",
          modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块
              [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
              [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
              [{ 'direction': 'rtl' }],             // 文本方向
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
              [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
              [{ 'font': [] }],     //字体
              [{ 'align': [] }],    //对齐方式
              ['clean'],    //清除字体样式
              ['image','video']    //上传图片、上传视频
            ]
          }
        },
        STEP:[{value:"P",label:"发布"},{value:"D",label:"草稿"}],
        LEVEL:[{value:"1",label:"普通"},{value:"2",label:"推荐"},{value:"3",label:"精选"}],
        CHARGE:[{value:"C",label:"收费"},{value:"F",label:"免费"}],
        travel:{},
        travels:[],
        queryInfo:{
          page:1,
          size:4,
        },
        url:"",
        organs:[],
        queryName:"",
        total:0,
        saveDialogVisible:false,
        editDialogVisible:false,
        contentDialogVisible:false,
        sortDialogVisible:false,
        saveFormRules:{
          name:[
            {required:true,message:'请输入游玩名称',trigger:'blur'},
            {min:3,max:10,message:'请游玩名称在3~10个字符之间',trigger: 'blur'}
          ],
        },
        editFormRules:{
          name:[
            {required:true,message:'请输入游玩名称',trigger:'blur'},
            {min:3,max:10,message:'请游玩名称在3~10个字符之间',trigger: 'blur'}
          ],
        },
        active:{},
        editForm:{},
        level1:[],
        level2:[],
        category:{},
        categorys:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        tree:{},
      }
    },
    mounted:function (){
      let _this = this;
      _this.list(1);//组件加载时立刻执行一次查询渲染数据
      _this.all();//组件加载时立刻执行一次查询渲染数据
      _this.allOrgan();
    },
    methods:{
      afterUpload(resp){
        let _this = this;
        let image = resp.content.path;
        _this.travel.image = image;
        _this.editForm.image = image;
        _this.url = image;
      },
      updateSort(){
        let _this = this;
        if(_this.sort.oldSort == _this.sort.newSort){
          _this.$message.success('当前排序没改动');
          return;
        }
        console.log("当前排序啊",_this.sort)
        _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/admin/travel/sort", _this.sort).then((res) => {
          let response = res.data;
          if (response.success) {
            _this.$message.success('当前排序变更成功');
            _this.sortDialogVisible = false;
            _this.list(1);
          } else {
            _this.$message.success('当前排序改动失败');
          }
        });
      },
      add(){
        this.travel={
          sort:this.total+1
        };
        this.saveDialogVisible = true;
      },
      checkTree(data, node, elem){//节点被点击时的回调
        console.log("节点:",this.$refs.treeRef.getCheckedNodes());
        console.log("节点:",1)
      },
      // 所有机构
      allOrgan(){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/organ/all',{
        }).then((response)=>{
          let resp = response.data;
          _this.organs = resp.content;
        });
        console.log("机构",this.organs);
      },
      // 查询
      all(){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/category/all',{
        }).then((response)=>{
          console.log("查询分类列表结果:",response);
          let resp = response.data;
          _this.categorys = resp.content;
          // 将所有记录格式化成树形结构
          _this.level1 = [];
          for (let i = 0; i < _this.categorys.length; i++) {
            let c = _this.categorys[i];
            if (c.parent === '00000000') {
              _this.level1.push(c);
              for (let j = 0; j < _this.categorys.length; j++) {
                let child = _this.categorys[j];
                if (child.parent === c.id) {
                  if (Tool.isEmpty(c.children)) {
                    c.children = [];
                  }
                  c.children.push(child);
                }
              }
            }
          }
        })
      },
      toActivity(travel){
        let _this = this;
        SessionStorage.set("travel",travel);
        _this.$router.push("/business/activity");
      },
      chargeEnum(row){
        let charge = row.charge
        if(charge == 'F'){
          return '免费'
        }
        if(charge == 'C'){
          return '收费'
        }
      },
      stepEnum(row){
        let step = row.step
        if(step == 'P'){
          return '发布'
        }
        if(step == 'D'){
          return '草稿'
        }
      },
      levelEnum(row){
        let level = row.level
        if(level == '1'){
          return '普通'
        }
        if(level == '2'){
          return '推荐'
        }
        if(level == '3'){
          return '精选'
        }
      },
      //更新键盘输入input值
      updateInput(e){
        let _this = this;
        _this.$forceUpdate()
      },
      //监听 pagesize当前页条数 改变的事件
      handleSizeChange(newSize){
        console.log(newSize)
        this.$data.queryInfo.size=newSize;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      //监听 页码值 改变的事件
      handleCurrentChange(newPage){
        this.$data.queryInfo.page=newPage;
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      // 监听添加模态框的关闭事件
      saveDialogClosed(){
        let _this = this;
        this.$nextTick(()=> {
          _this.$refs.saveFormRef.resetFields()
        })
      },
      // 监听添加模态框的关闭事件
      editDialogClosed(){
        let _this = this;
        this.$nextTick(()=> {
          _this.$refs.editFormRef.resetFields()
        })
      },
      // 监听添加模态框的关闭事件
      contentDialogClosed(){
        let _this = this;
        this.$nextTick(()=> {
        _this.$refs.contentFormRef.resetFields()
        })
      },
      // 监听添加模态框的关闭事件
      sortDialogClosed(){
        let _this = this;
        this.$nextTick(()=> {
          _this.$refs.sortFormRef.resetFields()
        })
      },
      // 查询 所有游玩
      list(page){
      let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/list',{
          page:this.$data.queryInfo.page,
          size:this.$data.queryInfo.size,
        }).then((response)=>{
              console.log("查询游玩列表结果:",response);
              let resp = response.data;
              _this.travels = resp.content.list;
              _this.total = resp.content.total;
            })
      },
      savetravel(page){
        let _this = this;
        _this.$refs.saveFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$data.tree = this.$refs.treeRef.getCheckedNodes();
          let categorys = _this.$data.tree;
          if(Tool.isEmpty(categorys)){
            _this.$message.success('请选择分类');
            return;
          }
          _this.travel.categorys = categorys;
          console.log("查询:",categorys);
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/save',_this.travel).then((response)=>{
            console.log("保存游玩列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('保存游玩信息成功');
            }
          })
        })
      },
      edittravel(page){
        let _this = this;
        _this.$refs.editFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$data.tree = this.$refs.treeRef.getCheckedNodes();
          let categorys = _this.$data.tree;
          if(Tool.isEmpty(categorys)){
            _this.$message.success('请选择分类');
            return;
          }
          _this.editForm.categorys = categorys;
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/save',_this.editForm).then((response)=>{
            console.log("修改游玩列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('修改游玩信息成功');
            }
          })
        })
      },
      saveContent(){
        let _this = this;
        let content = $("#content").summernote("code");
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/save-content/',{
          id:_this.travel.id,
          content:content
        }).then((response)=>{
          let resp = response.data;
          if(resp.success){
            return this.$message.success("保存成功");
          }else{
            return this.$message.error("保存失败");
          }
        });
        _this.contentDialogVisible = false;
      },
      openSortModal(item){
        let _this = this;
        _this.sort ={
          id:item.id,
          oldSort:item.sort,
          newSort:item.sort,
        }
        console.log("排序",_this.sort)
        _this.sortDialogVisible = true;
      },
      editContent(item){
        let _this = this;
        let id = item.id;
        $("#content").summernote({
          height:500, //高度
          focus:true, //是否获取焦点
          lang:'zh-CN' //中文
        });
        $("#content").summernote('code','');
        _this.travel = item;
        _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/admin/travel/find-content/'+id).then((response)=>{
          let resp = response.data;
          if(resp.content){
            $("#content").summernote('code',resp.content.content);
          }else{
            return this.$message.error("查询内容信息失败或者内容为空");
          }
        });
        _this.contentDialogVisible = true;
      },
      showEdittravel(id){
        console.log("当前行id值",id);
        let _this = this;
        _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/admin/travel/selectId/'+id).then((response)=>{
          let resp = response.data;
          if(response.status !== 200){
            return this.$message.error("查询游玩信息失败");
          }
          _this.editForm = resp.content;
          console.log("ID查询游玩列表结果:",response);
          _this.editDialogVisible = true;
        })
      },
      changedStatus(travel){
        let _this = this;
        console.log("测试",travel)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/changedStatus',travel).then((response)=>{
          if(response.status !=200){
            return _this.$message.error("修改状态失败")
          }
          _this.$message.success("修改状态成功")
          console.log("改变游玩状态结果",response);
            let resp = response.data;
        })
      },
      del(id){
        this.$confirm('此操作将游玩永久删除, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("删除当前的id",id)
          let _this = this;
          _this.openFullScreen();
          _this.$ajax.delete(process.env.VUE_APP_SERVER+'/business/admin/travel/delete/'+id).then((response)=>{
            console.log("删除游玩列表结果:",response);
            let resp = response.data;
            if (resp.success){
              _this.list(1);
              _this.$message.success("删除游玩成功")
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
            });
          });
        },
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      selectByName(page,queryName){
        let _this = this;
        _this.openFullScreen();
        console.log("当前搜索的name",_this.$data.queryName)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/travel/selectName',{
            page:this.$data.queryInfo.page,
            size:this.$data.queryInfo.size,
            name:this.$data.queryName,
          }).then((response)=>{
          console.log("模糊查询游玩名称结果:",response);
          let resp = response.data;
          _this.travels = resp.content.list;
          _this.total = resp.content.total;
        })
      },
      refresh(){
        this.openFullScreen();
        if(!document.getElementById('queryName')==""){
          this.selectByName();
        }else{
          this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      }
    },
}
</script>

<style lang="less" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.button {
  padding: 0;
  float: right;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.image {
  width: 100%;
  display: block;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>